<template>
  <div class="chat-container">
    <div class="container">
      <div class="top">
        <img src="@/assets/images/topImg.png">
      </div>
      <div class="content">
        <div class="left-panel">
          <div id="history" class="chat-history">
            <div class="chat-box" v-for="(char, index) in charList" :key="index" :class="{'align-left': char.sender === 'agent', 'align-right': char.sender === 'customer'}">
              <img v-if="char.sender === 'agent'" src="@/assets/images/agent.png" class="agent-avatar">
              <div class="chat-text">{{ char.text }}</div>
              <img v-if="char.sender === 'customer'" src="@/assets/images/customer.png" class="customer-avatar">
            </div>
          </div>
          <div class="chat-sender">
            <div class="chat-btns">
              <button class="btn" @click="handleServer('续期交费')">续期交费</button>
              <button class="btn" @click="handleServer('退保服务')">退保服务</button>
              <button class="btn" @click="handleServer('信息变更')">信息变更</button>
              <button class="btn" @click="handleUnderwriting">核保手册</button>
            </div>
            <textarea class="chat-input" v-model="newMessage" @keyup.enter="handleMessage" placeholder="请输入问题"></textarea>
            <button class="chat-btn" @click="handleMessage">发 送</button>
          </div>
        </div>
        <div class="right-panel">
          <div class="title">核保问卷</div>
          <div v-if="type === 'A'" class="title-box"> 
            <div class="disease-box" v-for="(item, index) in allDiseaseList" :key="index">
              <div class="disease-big" @click="btnClick(item)">
                <div>{{ item.mainDiseaseName }}</div>
                <img :src="item.isShow ? require('@/assets/images/arrow-up.png') : require('@/assets/images/arrow-down.png')">
              </div>
              <div v-if="item.isShow" class="disease-small">
                <div :class="element.isSelected ? 'disease-text-selected' : 'disease-text'" @click="diseaseClick(element)" v-for="(element, index) in item.goodsUnderDiseaseInfoVOList" :key="index">{{ element.sonDiseaseName }}</div>
              </div>
            </div>
          </div>
          <div v-else-if="type === 'B'"  class="title-box">
            <div class="answer-title">{{ answer.issueText }}</div>
            <div v-for="(item, index) in answer.goodsUnderIssueAnswerVOList" :key="index">
              <div @click="answerClick(item)" :class="item.isSelected ? 'answer-content-selected' : 'answer-content'">{{ item.answerSel }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { queryDiseaseAll, queryByIssueId, queryByVerdict, diseaseDownload } from 'api/disease.js'

export default {
  data() {
    return {
      charList: [
        { sender: 'agent', text: '你好，请问有什么可以帮助您的吗？'},
        { sender: 'customer', text: '你好，我想咨询一下关于产品的信息。' },
        { sender: 'agent', text: '当然，请问您想了解哪方面的信息？' },
      ],
      allDiseaseList: [],
      newMessage: '',
      isArrowDown: false,
      type: '',
      answer: {},
      params: [],
    };
  },
  created () {
    this.getList();
  },
  mounted () {
    this.moveToBottom();
  },
  computed: {
  },
  methods: {
    handleServer (text) {
      this.newMessage = text;
    },
    handleUnderwriting () {
      if (!this.resource) {
        this.$modal.msgWarning("请选择疾病类型");
        return 
      }
      diseaseDownload({ resource: this.resource }).then(data => {
        if (data.data.size <= 0) {
          this.$modal.msgWarning("该疾病类型，暂无核保手册");
          return
        }
        const downloadLink = document.createElement("a");
        downloadLink.href = window.URL.createObjectURL(data.data);
        downloadLink.download = '核保手册.pdf';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
      }).catch((err) => {}).finally(() => {});
    },
    getList () {
      queryDiseaseAll().then(res => {
        if (res.status === 200) {
          this.type = 'A';
          this.allDiseaseList = res.data.data.map(item => ({
            ...item,
            isShow: false,
            goodsUnderDiseaseInfoVOList: (item.goodsUnderDiseaseInfoVOList || []).map(element => ({
              ...element,
              isSelected: false,
            })),
          }));
        }
      }).catch((err) => {}).finally(() => {});
    },
    answerClick (row) {
      if (row.answerSel === '返回问卷列表') {
        this.type = 'A';
        // this.getList();
        return
      }
      this.answer.goodsUnderIssueAnswerVOList.forEach(item => {
        item.isSelected = false;
      });
      row.isSelected = true;
      this.newMessage = row.answerSel;
      this.selectType = '1';
      this.params = {
        sonDiseaseName: row.issueText,
        issueId: row.nextIssueId,
        answerIds: row.answerId,
      }
    },
    diseaseClick (row) {
      this.allDiseaseList.forEach(disease => {
        disease.goodsUnderDiseaseInfoVOList.forEach(item => {
          item.isSelected = false;
        });
      });
      row.isSelected = true;
      this.newMessage = row.sonDiseaseName;
      this.diseaseId = row.diseaseId;
      // 主疾病->子疾病，直接调用核保接口，没有问答接口
      this.selectType = '0';
      this.params = {
        sonDiseaseName: row.sonDiseaseName,
        issueId: row.issueId,
      }
      this.resource = row.sonDiseaseCode;
    },
    handleMessage () {
      if (this.newMessage.trim() !== '') {
        this.sendMessage('customer', this.newMessage);

        if (this.selectType === '0') {
          if (this.params.issueId === '0') {
            let params = { diseaseIds: [this.diseaseId] }
            queryByVerdict(params).then(res => {
              if (res.status === 200) {
                this.type = 'B';
                this.answer = {
                  issueText: '您的重疾险核保结论是' + '【' + res.data.data.verdict + '】',
                  goodsUnderIssueAnswerVOList: [{
                    answerSel: '返回问卷列表',
                    isSelected: false,
                  }]
                }
                this.sendMessage('agent', this.answer.issueText);
              }
            }).catch((err) => {}).finally(() => {});
            
          } else {
            let params = [{ issueId: this.params.issueId }]
            queryByIssueId(params).then(res => {
              if (res.status === 200) {
                this.type = 'B';
                this.answer = res.data.data[0];
                this.answer.goodsUnderIssueAnswerVOList = this.answer.goodsUnderIssueAnswerVOList.map(item => ({
                  ...item,
                  isSelected: false,
                }));
                this.sendMessage('agent', this.answer.issueText);
              }
            }).catch((err) => {}).finally(() => {});
          }
        } else {
          if (this.params.issueId === '0') {
            let params = { answerIds: [this.params.answerIds] }
            queryByVerdict(params).then(res => {
              if (res.status === 200) {
                this.type = 'B';
                this.answer = {
                  issueText: '您的重疾险核保结论是' + '【' + res.data.data.verdict + '】',
                  goodsUnderIssueAnswerVOList: [{
                    answerSel: '返回问卷列表',
                    isSelected: false,
                  }]
                }
                this.sendMessage('agent', this.answer.issueText);
              }
            }).catch((err) => {}).finally(() => {});

          } else {
            let params = [{ issueId: this.params.issueId }]
            queryByIssueId(params).then(res => {
              if (res.status === 200) {
                this.type = 'B';
                this.answer = res.data.data[0];
                this.answer.goodsUnderIssueAnswerVOList = this.answer.goodsUnderIssueAnswerVOList.map(item => ({
                  ...item,
                  isSelected: false,
                }));
                this.sendMessage('agent', this.answer.issueText);
              }
            }).catch((err) => {}).finally(() => {});

          }
        }

      }
    },
    sendMessage (user, message) {
      this.charList.push({ sender: user, text: message });
      this.newMessage = '';
      setTimeout(() => {
        this.moveToBottom();
      }, 100)
    },
    moveToBottom () {
      let history = document.getElementById('history');
      history.scrollTop = history.scrollHeight;
    },
    btnClick (row) {
      row.isShow = !row.isShow;
    },
  },
}

</script>

<style scoped lang="scss">
.chat-container {
  display: flex;
  justify-content: center;
}
.container {
  margin-top: 10px;
  width: 730px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
  .top {
    background-color: #F5F7FA;
    img {
      width: 100%;
      height: 60px;
    }
  }
  .content {
    display: flex;
    .left-panel {
      flex: 7;
      display: flex;
      flex-direction: column;
      background-color: #F5F7FA;
      .chat-history {
        height: 290px;
        overflow-y: auto;
        padding: 10px 10px 0px 10px;
        .align-left {
          justify-content: flex-start;
        }
        .align-right {
          justify-content: flex-end;
        }
        .chat-box {
          display: flex;
          align-items: flex-start;
          margin-bottom: 14px;
          .agent-avatar {
            width: 36px;
            height: 36px;
          }
          .customer-avatar {
            margin-left: 10px;
            width: 36px;
            height: 36px;
          }
          .chat-text {
            max-width: 280px;
            margin-left: 10px;
            padding: 8px 10px 8px 10px;
            border-radius: 6px;
            background-color: #fff;
            font-size: 11px;
          }
        }
      }
      .chat-sender {
        position: relative;
        height: 160px;
        padding: 6px 8px 0px 8px;
        .chat-btns {
          display: flex;
          margin-bottom: 5px;
          
          .btn {
            cursor: pointer;
            margin-right: 10px;
            height: 26px;
            width: 60px;
            font-size: 9px;
            border-radius: 20px;
          }
        }
        .chat-input {
          resize: none;
          font-family: 'Microsoft Yahei';
          padding: 10px;
          height: 80px;
          width: 100%;
          font-size: 11px;
          border-radius: 6px;
          line-height: 16px;
          overflow: auto;
        }
        .chat-btn {
          cursor: pointer;
          position: absolute;
          bottom: 6px;
          right: 10px;
          width: 54px;
          height: 24px;
          font-size: 9px;
          color: #fff;
          border-radius: 16px;
          background: linear-gradient(90deg, #69C0FF, #3477FF);
        }

      }
    }
    .right-panel {
      flex: 3;
      background-color: white;
      .title {
        color: #3477FF;
        font-size: 9px;
        font-weight: 600;
        text-align: center;
        border-bottom: 1.5px solid #3477FF;
        height: 32px;
        line-height: 32px;
      }
      .title-box {
        height: 418px;
        overflow-y: scroll;
        padding: 0px 10px;
        cursor: pointer;
        .disease-box {
          border-bottom: 1px solid #e4e4e4;
          font-size: 9px;
          .disease-big {
            display: flex;
            justify-content: space-between;
            justify-items: center;
            padding: 10px 0px;
            color: #666;
            div {
              padding-right: 2px;
            }
            img {
              width: 8px;
              height: 8px;
              padding-top: 2px;
            }
          }
          .disease-small {
            color: #333;
            font-size: 10px;
            .disease-text {
              padding: 5px;
              border-radius: 4px;
              background-color: #f0f0f0;
              margin-bottom: 6px;
            }
            .disease-text-selected {
              padding: 5px;
              border-radius: 4px;
              background-color: #eef5ff;
              margin-bottom: 6px;
              border: 1px solid #5ab8ff;
            }
          }
        }
        .disease-box:last-child {
          border-bottom: none;
        }

        .answer-title {
          padding: 10px 0px;
          color: #666;
          font-size: 9px;
        }
        .answer-content {
          margin-bottom: 10px;
          padding: 8px 10px;
          border-radius: 4px;
          color: #666;
          font-size: 9px;
          background-color: #f0f0f0;
        }
        .answer-content-selected {
          margin-bottom: 10px;
          padding: 8px 10px;
          border-radius: 4px;
          color: #666;
          font-size: 9px;
          background-color: #eef5ff;
          border: 1px solid #5ab8ff;
        }
        

      }

    }
  }

}

</style>
